﻿<template>
    <view>
        <u-toast ref="uToast" />
        <u-no-network></u-no-network>
        <u-navbar title="评论列表" safeAreaInsetTop fixed placeholder>
            <view class="coreshop-navbar-left-slot" slot="left">
                <u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
                <u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
                <u-icon name="home" size="22" @click="goHome"></u-icon>
            </view>
            <view slot="right">
            </view>
        </u-navbar>
        <view class="coreshop-padding-10">
            <!--评论-->
            <view class="coreshop-bg-white">
                <view v-for="(item, index) in goodsComments" :key="index">
                    <view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" v-if="index > 0" />
                    <view class="coreshop-common-view-box">
                        <view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm">
                            <view class="coreshop-basis-1">
                                <view class="coreshop-avatar sm round" :style="[{backgroundImage:'url('+ item.avatarImage +')'}]" />
                            </view>
                            <view class="coreshop-basis-9 coreshop-font-sm">
                                <view>{{ (item.nickName && item.nickName != '')?item.nickName:item.mobile }}</view>
                                <view class="coreshop-margin-top-10">{{ item.contentBody || ''}}</view>
                                <view class="coreshop-text-gray coreshop-margin-top-10">
                                    <u-rate v-model="item.score" :count="5" size="15"></u-rate>
                                </view>
                                <view class="coreshop-margin-top-10" v-if="item.imagesArr">
                                    <u-album :urls="item.imagesArr" rowCount="4"></u-album>
                                </view>
                                <view class="coreshop-text-gray coreshop-margin-top-5 coreshop-font-12">{{ item.createTime || ''}} {{ item.addon || ''}}</view>
                                <view class="coreshop-bg-gray coreshop-padding-10 coreshop-border-radius-tr-16 coreshop-margin-top-10" v-if="item.sellerContent">
                                    商家回复：{{item.sellerContent}}
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <u-loadmore :status="loadStatus" class="coreshop-margin-top-10" :icon-type="iconType" :load-text="loadText" />
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                goodsId: 0,
                goodsComments: [],
                page: 1,
                limit: 10,
                page: 1,
                pageSize: 20,
                loadStatus: 'loadmore',
                loadIconType: 'flower',
                loadText: {
                    loadmore: '点击或上拉加载更多',
                    loading: '正在加载中',
                    nomore: '没有更多了'
                },
            }
        },
        onLoad(options) {
            this.goodsId = options.id;
            this.getGoodsComments();
        },
        onReachBottom() {
            if (this.loadStatus != 'nomore') {
                this.getGoodsComments();
            }
        },
        methods: {
            // 获取商品评论信息
            getGoodsComments() {
                var _that = this;
                let data = {
                    page: _that.page,
                    limit: _that.limit,
                    id: _that.goodsId,
                }
                this.loadStatus = 'loading';
                this.$u.api.goodsComment(data).then(res => {
                    if (res.status == true) {
                        let _list = res.data.list;
                        // 如果评论没有图片 在这块作处理否则控制台报错
                        _list.forEach(item => {
                            if (!item.hasOwnProperty('images')) {
                                _that.$set(item, 'images', [])
                            }
                            _that.goodsComments.push(item);
                        });
                        // 根据count数量判断是否还有数据
                        if (res.data.totalPages > _that.page) {
                            _that.loadStatus = 'loadmore';
                            _that.page++;
                        } else {
                            // 数据已加载完毕
                            this.loadStatus = 'nomore';
                        }
                    } else {
                        _that.$refs.uToast.show({ message: res.msg, type: 'error' });
                    }
                })
            },
        }
    }
</script>

<style lang="scss" scoped>

</style>
